Skip to content

Conversation

@ArgoZhang
Copy link
Member

@ArgoZhang ArgoZhang commented Jun 13, 2025

Link issues

fixes #6221

Summary By Copilot

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Add a new ShowMonth option to the FlipClock component to optionally display the month, including support in the Razor markup, underlying JavaScript logic, unit tests, samples, and documentation.

New Features:

  • Introduce ShowMonth parameter to FlipClock to enable month display.

Enhancements:

  • Extend FlipClock’s JavaScript initialization and update logic to include months.
  • Update component markup to conditionally render the month list when ShowMonth is true.

Documentation:

  • Add ShowMonth attribute entry and default value in the component’s documentation.
  • Include a demo block in the sample page showcasing the ShowMonth option.

Tests:

  • Add unit test to verify month list appears only when ShowMonth is enabled.

@bb-auto bb-auto bot added the enhancement New feature or request label Jun 13, 2025
@sourcery-ai
Copy link
Contributor

sourcery-ai bot commented Jun 13, 2025

Reviewer's Guide

Introduce a new ShowMonth parameter for the FlipClock component, wiring it through the Razor UI, JS interop, unit tests, and sample/demo metadata to enable optional month display.

Sequence diagram for FlipClock month update

sequenceDiagram
    participant C as FlipClock.razor
    participant JS as FlipClock.razor.js
    participant DOM as DOM

    C->>JS: init(id, options)
    activate JS
    JS->>DOM: querySelector('.bb-flip-clock-list.month')
    Note right of JS: Get month element from DOM
    deactivate JS

    loop On timer tick
        JS->>JS: go()
        activate JS
        JS->>JS: getDate()
        Note right of JS: returns { months, days, hours, ... }
        alt If month has changed
            JS->>JS: setTime(listMonth, months, countDown)
            activate JS
            JS->>DOM: Update month display
            deactivate JS
        end
        deactivate JS
    end
Loading

Class diagram for FlipClock component updates

classDiagram
  class FlipClock {
    +bool ShowMonth
  }
Loading

File-Level Changes

Change Details Files
Expose and render ShowMonth parameter in the FlipClock component
  • Add ShowMonth boolean [Parameter] in component code
  • Conditionally render month flip list in FlipClock.razor
  • Include RenderItem placeholders for month slots
src/BootstrapBlazor/Components/FlipClock/FlipClock.razor
src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
Extend JavaScript logic to handle month values
  • Query .month element in init()
  • Include months field in initial and countdown date objects
  • Track lastMonth and update month panel when months change
src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
Add unit test coverage for ShowMonth feature
  • Verify month list is hidden by default
  • Render FlipClock with ShowMonth=true and confirm month list appears
test/UnitTest/Components/FlipClockTest.cs
Update sample attributes and demo blocks for ShowMonth
  • Add ShowMonth entry in component attribute metadata
  • Insert DemoBlock showcasing FlipClock with ShowMonth enabled
src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs
src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor

Assessment against linked issues

Issue Objective Addressed Explanation

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@bb-auto bb-auto bot added this to the 9.7.0 milestone Jun 13, 2025
sourcery-ai[bot]
sourcery-ai bot previously approved these changes Jun 13, 2025
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

  • In FlipClock.razor, the month container is wrapped in an @if (ShowDay) check instead of ShowMonth, so update the condition to use the new ShowMonth parameter.
  • The JS getDate function only calculates months in the non-countdown branch and still returns it for countdown, leading to an undefined value—compute and return months in both modes.
  • Wrap your listMonth querying and setTime calls in a guard (e.g. check if listMonth exists) to prevent null reference errors when the month element isn’t present.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In FlipClock.razor, the month container is wrapped in an `@if (ShowDay)` check instead of `ShowMonth`, so update the condition to use the new `ShowMonth` parameter.
- The JS `getDate` function only calculates `months` in the non-countdown branch and still returns it for countdown, leading to an undefined value—compute and return `months` in both modes.
- Wrap your `listMonth` querying and `setTime` calls in a guard (e.g. check if `listMonth` exists) to prevent null reference errors when the month element isn’t present.

## Individual Comments

### Comment 1
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js:53` </location>
<code_context>
         const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
         const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
-        return { days, hours, minutes, seconds };
+        return { months, days, hours, minutes, seconds };
     }

</code_context>

<issue_to_address>
The countdown branch returns a 'months' property that is never computed

'months' is returned without being calculated, so it will always be undefined. Please compute its value or remove it from the return object.
</issue_to_address>

### Comment 2
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js:80` </location>
<code_context>
             setTime(listDay, days, countDown);
         }
-        return { days, hours, minutes, seconds }
+        if (lastMonth !== months) {
+            lastDay = days;
+            setTime(listMonth, months, countDown);
+        }
</code_context>

<issue_to_address>
Wrong variable assignment in month update block

Assign `lastMonth = months` after updating the UI to ensure month changes are tracked correctly.
</issue_to_address>

### Comment 3
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor:6` </location>
<code_context>
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]

 <div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+    @if (ShowDay)
+    {
+        <div class="bb-flip-clock-list month">
</code_context>

<issue_to_address>
Month display block incorrectly gated by ShowDay

The month list should be rendered based on `ShowMonth`, not `ShowDay`. Update the condition to `@if (ShowMonth)` to fix this.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@codecov
Copy link

codecov bot commented Jun 13, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (1c0abc4) to head (57ee60c).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #6222   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          704       704           
  Lines        31099     31105    +6     
  Branches      4396      4397    +1     
=========================================
+ Hits         31099     31105    +6     
Flag Coverage Δ
BB 100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@ArgoZhang ArgoZhang merged commit 48289a4 into main Jun 13, 2025
5 checks passed
@ArgoZhang ArgoZhang deleted the feat-month branch June 13, 2025 03:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(FlipClock): add ShowMonth parameter

2 participants